{% extends 'layout.html' %}
{% block content %}

<div class="container">
    <div style="margin-bottom: 10px" >
        <!--    上下间距-->
        <!--    target="_blank" 新页面打开-->
        <a class="btn btn-primary" href="/telnumberadd" target="_blank">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新增靓号列表
        </a>

        <div style="float:right;width: 250px">
<!--            这里的宽度好像会导致换行-->
        <div class="form-inline">
            <form method="get">
                <input type="text" class="form-control" placeholder="Search" name="tel" value="{{value}}">
                     <button type="submit" class="btn btn-default">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
            </form>
        </div>
        </div>

    </div>


    <div class="panel  panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">编辑靓号信息</h3>
        </div>

        <!-- Table -->
        <table class="table table-bordered "   >
            <thead >
            <tr >
                <th>ID</th>
                <th>号码</th>
                <th>价格</th>
                <th>级别</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody >
            {% for item in queryset%}
            <tr>
                <td>{{ item.id }}</td>
                <td>{{ item.number}}</td>
                <td>{{ item.price}}</td>
                <td>{{ item.get_level_display}}</td>
                <td>{{ item.get_status_display}}</td>
                <td>
                    <!--                    get到id的方法一：-->
                    <a class="btn btn-success btn-xs" href="/telnumber/{{item.id}}/edit">编辑</a>
                    <!--                    get到id的方法二：-->
                    <a class="btn btn-danger btn-xs" href="/telnumber/{{item.id}}/delete">删除</a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

</div>
    <ul class="pagination">
<!--        <li>-->
<!--            <a href="#" aria-label="Previous">-->
<!--                <span aria-hidden="true">«</span>-->
<!--            </a>-->
<!--        </li>-->
        {{dic_pagejoin}}
<!--        <li>-->
<!--            <a href="#" aria-label="Next">-->
<!--                <span aria-hidden="true">»</span>-->
<!--            </a>-->
<!--        </li>-->
        <li>
            <form method="get">
                <div class="input-group" style="width: 200px;">
                    <input type="text" class="form-control" name="page" placeholder="Search for...">
                    <span class="input-group-btn">
            <button class="btn btn-default"  type="submit">Go!</button>
                    </span>
                </div>
            </form>
        </li>
    </ul>
</div>


{% endblock %}